<template>
    <!-- <el-button type="primary" style="margin-left: 16px" @click="drawer = true">
        open
    </el-button> -->
    <!---头像信息-->
    <el-avatar shape="cover" :size="100" :src="props.modelValue" @click="drawer = true">
        <img src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png" alt="" style="border-radius: 3px;">
    </el-avatar>
    <!--使用抽屉加载 图库上传-->
    <el-drawer v-model="drawer" title="我的图片库" direction="ttb" size="50%">
        <el-upload v-model:file-list="fileList" list-type="picture-card" :auto-upload="false" :on-change="onChange">
            <el-icon>
                <Plus />
            </el-icon>
            <template #file="{ file }">
                <div>
                    <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                    <span class="el-upload-list__item-actions">
                        <span class="el-upload-list__item-preview" @click="getImgurl(file.url)">
                            <el-icon><zoom-in /></el-icon>
                        </span>

                    </span>
                </div>
            </template>
        </el-upload>
    </el-drawer>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { uploadApi } from '@/api'
const drawer = ref(false)
const imageurl = ref("")
const fileList = ref([
    {
        name: 'food.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
    }
])

const onChange = (uploadFile: any, uploadFiles: any) => {
    console.log("获取的值是：", uploadFile);
    console.log("获取的第二个值是：", uploadFiles);
    let name = uploadFile.name
    console.log("获取的图像名称是：", name);
    let file = uploadFile.raw

    //获取完file要读取 FileReader是一个异步读取存储在计算机上的文件
    let reader = new FileReader()
    // 按文件类型读取文件的数据 并以字符串表示
    reader.readAsDataURL(file)
    //使用onload读取数据  完成时触发
    reader.onload = () => {
        //打印base64码
        console.log(reader.result);
        callUploadApi(name, reader.result)
    }
}
onMounted(() => {
    //获取图片信息
    callUploadgetImg()
})

//上传图片
const callUploadApi = (name: any, base64: any) => {
    uploadApi.upload.call({ name: name, base64: base64 }).then((res: any) => {
        console.log(res);
        //上传完成后刷新页面
        callUploadgetImg()
    })
}
//获取图片列表
const callUploadgetImg = () => {
    uploadApi.getImg.call().then((res: any) => {
        //console.log(res);
        fileList.value = res
    })
}


const getImgurl = (imgurl: any) => {
    console.log("点击了", imgurl);
    //头像赋值
    // imageurl.value = imgurl
    emit('update:modelValue',imgurl)
    //窗体关闭
    drawer.value = false
}
//定义传递的默认类型，原则上数据流是单项 父-->子
const props = defineProps({
    modelValue: {
        type: String,
        default:''
    }
})
//提前定义接受的内容 告知父类要拿什么数据
const emit=defineEmits(['update:modelValue'])

</script>
<style scoped></style>